<template>
    <div id="nav">
        <div class="NavItem" v-for="(item, index) in RouterConfig" :key="index">
            <Poptip placement="left-start">
                <Icon :type="item.icon" />
                <!-- <i class="fa" :class="item.icon" :title="item.name" aria-hidden="true"></i> -->
                <div slot="content">
                    <router-link v-for="(child, index) in item.children" :key="'nav_' + index" :to="child.path">
                        <div class="NavChildItem" :class="{ active: activePath == child.path }">
                            <div class="NavChildIcon"></div>
                            <span>{{ child.name }}</span>
                        </div>
                    </router-link>
                </div>
            </Poptip>
        </div>
    </div>
</template>

<script>
// import RouterConfig from '../../../public/RouterConfig.js'

export default {
    data() {
        return {
            active: '',
            RouterConfig: window.RouterConfig,
            activePath: null,
        }
    },
    watch: {
        $route: {
            deep: true,
            immediate: true,
            handler(newValue) {
                this.activePath = newValue.fullPath
            }
        }
    }
}
</script>

<style>
#nav {
    padding-top: 10px;
}

.NavItem {
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    cursor: pointer;
    margin-bottom: 5px;
    position: relative;
}

.NavItem:hover i {
    color: #fff;
}

.NavChildItem {
    line-height: 40px;
    text-align: left;
    padding: 10px 20px 10px 0px;
}

.NavChildItem:hover {
    background-color: rgb(40, 40, 40);
}

.NavChildItem.active {
    background-color: rgb(80, 80, 80);
}

.NavChildIcon {
    width: 60px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 15px 0;
    background-image: url(../../assets/no-image.png);
    background-size: 100% 100%;
}
</style>